<script setup lang="ts">
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table'

import { formatTime } from '@/pages/integral/helper'
import { delMessage, getv1Message } from '@fl/api/ums-api'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import type { searchDataTy } from './type'
// 搜索
const searchData = reactive<searchDataTy>({
    channel: '', // 发送渠道
    message_id: '', // 消息编号
    scene: '', // 发送类型
    subject: '', // 消息名称
})
// 重置
function reset() {
    searchData.message_id = ''
    searchData.subject = ''
    searchData.channel = ''
    searchData.scene = ''
    getData()
}
const xGrid = ref<VxeGridInstance<any>>()
// 表单数据主要参数
const gridOptions = reactive<VxeGridProps<any>>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { title: '序号', type: 'seq', width: '60' },
        { field: 'id', title: '消息编号' },
        { field: 'subject', title: '消息名称' },
        { field: 'channel', title: '发送渠道' },
        { field: 'content', title: '消息内容' },
        { field: 'link', slots: { default: 'link' }, title: '目标链接' },
        // { field: 'sender_id', title: '操作人' },
        { field: 'create_time', title: '操作时间' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 530,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
const gridEvents: VxeGridListeners<any> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()
// 获取列表数据
async function getData() {
    gridOptions.loading = true
    const param: any = Object.assign({}, searchData)
    param.page = gridOptions.pagerConfig && gridOptions.pagerConfig.currentPage
    param.page_size = gridOptions.pagerConfig && gridOptions.pagerConfig.pageSize
    getv1Message(param).then((res: any) => {
        console.log('🚀 ~ getData ~ res:', res)
        gridOptions.loading = false
        const { items, total } = res
        gridOptions.pagerConfig.total = total || 10

        gridOptions.data = items.map((item) => {
            item.create_time = formatTime(item.create_time, 'YYYY-MM-DD hh:mm:ss')
            return item
        })
    })
}
const router = useRouter()
// 跳转x修改
// function toUpdate(row: any) {
//     router.replace({
//         path: '/marketing-promotion/message-center-service/send-message',
//         query: {
//             row: JSON.stringify(row),
//         },
//     })
// }
function addMessage() {
    router.push('/marketing-promotion/message-center-service/send-message')
}
async function del(row: any) {
    try {
        await delMessage(row.id)
        getData()
        ElMessage.success('删除成功')
    }
    catch (error: any) {
        ElMessage.error(error)
    }
}
</script>

<template>
    <div class="search">
        <div class="search-header">
            <el-form inline
                     class="form"
            >
                <el-form-item label="消息编号">
                    <el-input v-model="searchData.message_id"
                              type="text"
                              placeholder="请输入消息编号"
                              clearable
                    />
                </el-form-item>

                <el-form-item label="消息名称">
                    <el-input v-model="searchData.subject"
                              type="text"
                              placeholder="请输入消息名称"
                              clearable
                    />
                </el-form-item>

                <el-form-item label="发送渠道">
                    <el-select v-model="searchData.channel"
                               style="width:150px"
                               clearable
                               placeholder="请选择发送渠道"
                    >
                        <el-option label="短信"
                                   value="SMS"
                        />

                        <el-option label="APP"
                                   value="APP"
                        />

                        <el-option label="微信"
                                   value="WeChatApp"
                        />

                        <el-option label="系统消息"
                                   value="PMSG"
                        />

                        <el-option label="全部"
                                   value=""
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="推送类型">
                    <el-select v-model="searchData.scene"
                               style="width:150px"
                               clearable
                               placeholder="请选择推送类型"
                    >
                        <el-option label="全部"
                                   value=""
                        />

                        <el-option label="好房"
                                   value="HAOFANG"
                        />

                        <el-option label="保障房"
                                   value="BAOZHANGFANG"
                        />

                        <el-option label="政策"
                                   value="ZHENGCE"
                        />

                        <el-option label="登录"
                                   value="DENGLU"
                        />
                    </el-select>
                </el-form-item>
            </el-form>

            <div class="form-btn">
                <el-button color="#DA0004"
                           @click="getData"
                >
                    搜索
                </el-button>

                <el-button @click="reset">
                    重置
                </el-button>
            </div>
        </div>
    </div>

    <div class="list">
        <div class="list-btn">
            <el-button size="small"
                       color="#DA0004"
                       @click="addMessage"
            >
                +新增
            </el-button>
        </div>

        <div class="list">
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #link="{ row }">
                    <a v-if="row.link"
                       :href="row.link"
                       color="#0F40F5 90%"
                    >目标链接</a>
                </template>

                <template #state="{ row }">
                    {{ row.data_status === 0 ? '成功' : '' }}
                </template>

                <template #operate="{ row }">
                    <!-- <vxe-button size="mini"
                                content="修改"
                                type="text"
                                style="color:#DA0004"
                                @click="toUpdate(row)"
                    /> -->

                    <vxe-button size="mini"
                                content="删除"
                                type="text"
                                @click="del(row)"
                    />
                </template>
            </vxe-grid>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .search {
    min-height: 145px;
    background-color: #fff;
    padding: 20px;

    .search-btn {
        margin-top: 20px;
        font-size: 12px;
    }
}

.list {
    margin-top: 20px;
    padding: 30px;
    background: #fff;

    .list-btn {
        margin-bottom: 20px;
    }
}

.search-header {
    display: flex;
    border-bottom: 1px solid #cdcdd4;

    .form {
        flex: 1;
    }

    .form-btn {
        flex: 0 0 13%;
    }
}
</style>
